<template>
  <div>
    <div class="box">
      <img :src="dogImg" alt="" />

      <div
        class="text"
        @click="dogText(dogName)"
        :style="{ backgroundColor: colorStr }"
      >
        {{ dogName }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorStr: '',
    }
  },
  props: ['dogImg', 'dogName'],
  methods: {
    dogText(dogname) {
      this.colorStr = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
        Math.random() * 256
      )}, ${Math.floor(Math.random() * 256)})`
      console.log('erzi')
      this.$emit('dogHs', dogname)
    },
  },
}
</script>

<style scopend>
.box {
  border: 1px solid black;
}
img {
  /* margin-top: 15px; */
  border: 1px solid black;
  width: 500px;
  height: 300px;
}
.text {
  color: rgb(10, 134, 43);
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}
</style>
